<template>
	<div class="diag">
		<el-dialog v-model="dialogFormVisible" title="单表核验规则" @close="close">
			<el-switch v-model="switchValue" inactive-text="规则核验状态"></el-switch>
			<div class="checks">
				<div v-for="(it, index) of rules" :key="index" class="rule">
					<p>核验要求{{ index + 1 }}</p>
					<div class="table_select">
						选择规则
						<el-select v-model="it.ruleId" style="width: 300px" placeholder="请选择">
							<el-option v-for="item in ruleOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
						表字段核验
						<el-select v-model="it.tableList" multiple filterable placeholder="请选择">
							<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
						<el-icon v-if="index != 0" class="el-icon-remove-outline" @click="removeChecks(index)"><Remove /></el-icon>
						<el-icon v-if="index + 1 == rules.length" class="el-icon-circle-plus-outline" @click="addChecks"><CirclePlus /></el-icon>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取 消</el-button>
					<el-button type="primary" @click="confirm">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="SoloCheck">
import { getTableFields, singleTableSave, getTableRules } from '@/api/data-qa-fe/index'
import { ref, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'

const emit = defineEmits(['close'])
const props = defineProps({
	diagShow: {
		type: Boolean,
		default: false
	},
	tableId: {
		type: Number,
		default: () => 1
	},
	checkStatus: {
		type: String,
		default: () => ''
	},
	versionId: {
		type: String,
		default: () => ''
	}
})
const dialogFormVisible = ref(false)
const switchValue = ref(false)
const ruleOptions = ref([])
const fieldOptions = ref({})
const fieldList = ref([])
const value = ref('')
const rules = ref([
	{
		ruleId: '',
		checkSql: '',
		tableList: []
	}
])
watch(
	() => props.diagShow,
	(newVal, oldVale) => {
		dialogFormVisible.value = newVal
	}
)
watch(
	() => props.tableId,
	(newVal, oldVale) => {
		init()
	}
)
watch(
	() => props.checkStatus,
	(newVal, oldVale) => {
		switchValue.value = newVal == '0' ? true : false
	}
)
onMounted(() => {
	// init()
	getRules()
})
const init = () => {
	let param = {
		id: props.tableId
	}
	getTableFields(param).then((res: any) => {
		if (res.code == 0) {
			fieldList.value = res.data
			fieldOptions.value = res.data.map(item => {
				let newItem = {
					value: item.datasetFieldId,
					label: item.datasetFieldName
				}
				return newItem
			})
		}
	})
}
const getRules = () => {
	getTableRules().then((res: any) => {
		if (res.code == 0) {
			ruleOptions.value = res.data
		}
	})
}
const addChecks = () => {
	rules.value.push({
		ruleId: '',
		checkSql: '',
		tableList: []
	})
}
const removeChecks = (index: any) => {
	rules.value.splice(index, 1)
}
const close = () => {
	dialogFormVisible.value = false
	emit('close', false)
}
const fieldCheck = (msg: string) => {
	ElMessage({
		message: msg,
		type: 'error'
	})
}
const confirm = () => {
	let newFiles: any[] = []
	let hasSpace = false
	const rulesData = JSON.parse(JSON.stringify(rules.value))
	rulesData.forEach(item => {
		if (item.ruleId != '') {
			ruleOptions.value.forEach((v: any) => {
				if (item.ruleId === v.value) {
					item.checkSql = v.label
				}
			})
		} else {
			fieldCheck('请选择规则!')
			hasSpace = true
			return
		}
		if (item.tableList.length > 0) {
			item.tableList.forEach((it: any) => {
				fieldList.value.forEach((v: any) => {
					if (v.datasetFieldId === it) {
						it = v
					}
				})
				newFiles.push(it)
			})

			const data = item.tableList.map((it: any) => {
				return fieldList.value.filter((v: any) => {
					return v.datasetFieldId === it
				})[0]
			})
			const datas: any = [
				{
					columns: data
				}
			]

			item.tableList = datas
		} else {
			fieldCheck('请选择字段!')
			hasSpace = true
			return
		}
		// item.tableList.splice(1)
		// item.tableList[0] = {
		// 	columns: newFiles
		// }
	})

	let param = {
		hyList: rulesData,
		versionId: props.versionId,
		datasetTableId: props.tableId,
		invalidFlag: switchValue.value ? '0' : '1'
	}

	if (!hasSpace) {
		singleTableSave(param).then(res => {
			if (res.code == 0) {
				ElMessage({
					type: 'success',
					message: '核验成功!'
				})
			} else {
				ElMessage({
					type: 'error',
					message: res.msg
				})
			}
			rules.value = [
				{
					ruleId: '',
					checkSql: '',
					tableList: []
				}
			]
			dialogFormVisible.value = false
			emit('close', false)
		})
	}
}
</script>
<style>
.el-switch__label span {
	color: #303133;
}
</style>
<style lang="scss" scoped>
.checks {
	max-height: 500px;
	overflow: auto;
}
.rule {
	p {
		margin: 20px 0;
	}
	.table_select {
		margin-top: 15px;
	}
}
.el-icon {
	margin-left: 8px;
}
</style>
